<template>
	<div v-if="adminId==undefined">
		<!-- 操作栏 -->
		<el-input placeholder="请输入门店名称" v-model="branchName" :value="branchName" @keyup.enter="searchBranch"></el-input>
		<el-input placeholder="请输入负责人" v-model="head" :value="head" @keyup.enter="searchBranch"></el-input>
		<el-time-select  format="HH:mm" value-format="HH:mm" v-model="time" 
			style="width: 150px; margin-right: 10px; border: none;"
			start="00:00"
			step="00:30"
			end="23:59"
			placeholder="请输入营业时间" @change="searchBranch" >
		</el-time-select>
		<el-input placeholder="请输入门店地址" v-model="address" :value="address" @keyup.enter="searchBranch"></el-input>
		<el-input placeholder="请输入联系方式" v-model="tel" :value="tel" @keyup.enter="searchBranch"></el-input>
		<el-button class="searchBtn" type='info' :icon="Search" @click="searchBranch">搜索</el-button>
		<el-button class="addBtn" type='info' :icon="CirclePlus" @click="addBranch">添加</el-button>
	</div>
	<div v-else>
		<el-button class="searchBtn" type='info' @click="back">返回</el-button>
	</div>
	<!-- 表格 -->
	<el-table :data='tableData'>
		<el-table-column label="门店logo"  align="center">
			<template #default='scope'>
				<img :src="baseUrl+scope.row.outletLogo" style="width: 50px;height: 50px;border-radius: 50%;"/>
			</template>
		</el-table-column>
		<el-table-column label="门店名称" prop="outletName" align="center"></el-table-column>
		<el-table-column label="负责人" prop="adminName" align="center"></el-table-column>
		<el-table-column label="营业时间" prop="outletOpenTime" align="center"></el-table-column>
		<el-table-column label="门店地址" prop="outletAddress" align="center"></el-table-column>
		<el-table-column label="门店联系方式" prop="outletPhone" align="center"></el-table-column>
		<el-table-column label="备注" prop="outletDescr" align="center"></el-table-column>
		<el-table-column label="操作"  align="center">
			<template #default="scope">
				<el-button  type="primary" size="small" style="padding: 7px 10px;font-size: 12px;"
					@click="updateBranch(scope.row.outletId)">修改</el-button>
				<el-button v-if="adminId==undefined" type="danger" size="small" style="padding: 7px 10px;font-size: 12px;"
					@click="del(scope.row.outletId)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination
		layout="prev,pager,next"
		:page-size="pageSize"
		:page-count="pageCount"
		v-model:current-page="pageIndex"	
		@current-change="changePage"
	></el-pagination>
</template>

<script setup lang="ts">
	// el组件
	import { ElMessage, ElMessageBox} from 'element-plus';
	import {Search,CirclePlus} from '@element-plus/icons-vue'
	// 接口
	import {BranchList,delBranch,getBranchById} from "../api/wqj/index"
	// ref等相关
	import { ref,shallowRef,reactive ,onMounted} from 'vue';
	// 路由
	import { useRouter ,useRoute} from 'vue-router';
	let router=useRouter()
	let route=useRoute()
	// 自定义
	let baseUrl="http://192.168.16.199:8081/"//基础地址用于图片显示
	let tableData=ref([])//表格数据
	let branchName=ref("")
	let head=ref("")
	let time=ref("")
	let address=ref("")
	let tel=ref("")
	let pageSize:any='5';//每页显示4条数据
	let pageIndex=ref<string>('1');//当前显示第0页
	let pageCount=shallowRef<number>(0)//总页数
	let adminId=ref()
	let outletId=ref()
	let storeList=reactive({})
	// 门店--表格信息
	const showBranch=async()=>{
		let res=await BranchList({
			page:pageIndex.value,
			size:pageSize
		})
		tableData.value=res.outlets
		pageCount.value=res.totalPages
		disposeTime()
		// console.log("门店信息",tableData.value)
	}
	// 搜索
	const search=async()=>{
		let res=await BranchList({
			page:pageIndex.value,
			size:pageSize,
			outletName:branchName.value,//门店名称
			adminName:head.value,//负责人
			openTime:time.value,//营业时间
			outletAddress:address.value,//地址
			outletPhone:tel.value//电话
		})
		// console.log("搜索结果",res)
		tableData.value=res.outlets
		disposeTime()
		pageCount.value=res.totalPages
	}
	// 回车搜索
	const searchBranch=()=>{
		pageIndex.value='1',
		branchName.value=branchName.value,//门店名称
		head.value=head.value,//负责人
		time.value=time.value,//营业时间
		address.value=address.value,//地址
		tel.value=tel.value//电话
		search()
	}
	// 处理时间格式
	const disposeTime=()=>{
		let prevTime = ""
		let nextTime = ""
		let length = 0
		tableData.value.forEach(v => {
			v.outletOpenTime + ""
			if (v.outletOpenTime.length != 0) {
				prevTime = v.outletOpenTime.substring(0, 5)
				nextTime = v.outletOpenTime.substring(6)
				length = prevTime.length
				if (prevTime[length] != "-") {
					prevTime = prevTime + "-"
				}
				v.outletOpenTime = prevTime + nextTime
			}
		})
	}
	// 切页
	const changePage=(page:string)=>{
		pageIndex.value=String(page);
		search()
	}
	// 添加门店
	const addBranch=()=>{
		router.push('/addBranch')
	}
	// 修改门店
	const updateBranch=(outletId:number)=>{
		// console.log("outletId",outletId)
		router.push('/updateBranch?outletId='+outletId)
	}
	// 删除门店
	const del=(branchId)=>{  
		console.log(branchId)
	  ElMessageBox.confirm('此操作将永久删除该门店, 是否继续?', '提示', {  
	    confirmButtonText: '确定',  
	    cancelButtonText: '取消',  
	    type: 'warning'  
	  }).then(async() => {    
	    try {  
	      await delBranch({
			  id:branchId
		  })    
	      search()
	     ElMessage.success("删除成功")  
	    } catch (error){    
	      ElMessage.error("删除失败")  
	    }  
	  }).catch(() => {  
	    ElMessage("取消删除")  
	  })  
	}
	//查询分店
	const showstore=async()=>{
		let res=await getBranchById({
			id:Number(outletId.value)
		})
		// console.log("查询分店结果",res)
		tableData.value.push(res)
		disposeTime()
		console.log(tableData.value,"查询分店结果")
	}
	//返回到个人中心
	const back=()=>{
		router.push("/myCenter")
	}
	// 挂载
	onMounted(()=>{
		adminId.value=route.query.adminId
		outletId.value=route.query.outletId
		console.log(adminId.value,'adminId.value')
		if(adminId.value!=''&&outletId.value){
			showstore()
		}else{
			showBranch()
		}
		
	})
</script>

<style scoped lang="less">
	.el-input{
		width: 150px;
		margin-right: 10px;
		border: none;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	.addBtn{
		background-color: #00a0e9;
		border: none;
		float: right;
		margin-right: 20px;
	}
	.el-table{
		margin-top: 20px;
	}
	/* 表格间隙 */
	:deep(.el-table__body) {
	  -webkit-border-vertical-spacing: 9px;
	}
	/* 分页样式 */
	.el-pagination{
		--el-pagination-bg-color:none;
		--el-pagination-button-disabled-bg-color:none;
		justify-content: center;
	}
</style>